<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="设备信息历史记录" width="1280px" @open="openDialog" @close="closeDialog">
    <div class="view-equip-title">设备信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备ID</div>
          <div class="text">{{ eqpDetailData?.eqpId }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备名称</div>
          <div class="text">{{ eqpDetailData?.eqpName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备编号</div>
          <div class="text">{{ eqpDetailData?.showName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">科室</div>
          <div class="text">{{ eqpDetailData?.classNameDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">系统</div>
          <div class="text">{{ eqpDetailData?.systemName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备总称</div>
          <div class="text">{{ eqpDetailData?.categoryName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备类型</div>
          <div class="text">{{ eqpDetailData?.typeName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备型号</div>
          <div class="text">{{ eqpDetailData?.modelName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备位置</div>
          <div class="text">{{ eqpDetailData?.positionNameAll }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">资产编码</div>
          <div class="text">{{ eqpDetailData?.poCode }}</div>
        </div>
        <div class="view-equip-item large">
          <div class="label">管理属性</div>
          <div class="text">{{ tempManage }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备二维码</div>
          <div class="text">
            <px-upload v-model:file-list="qrcodeList" :limit="1" list-type="picture-card">
              <template #file="{ file }">
                <div>
                  <img class="px-upload-list__item-thumbnail" :src="file.url || file.fileUrl" alt="" />
                  <span class="px-upload-list__item-actions">
                    <span @click="photoPreview">
                      <px-icon><zoom-in /></px-icon>
                    </span>
                    <span @click="photoDownload(file)">
                      <px-icon>
                        <Download />
                      </px-icon>
                    </span>
                  </span>
                </div>
              </template>
            </px-upload>
            <px-dialog v-model="dialogVisible">
              <img w-full :src="qrcodeUrl" style="margin: 0 auto" alt="设备二维码" />
            </px-dialog>
          </div>
        </div>
        <div class="view-equip-item large">
          <div class="label">设备标签</div>
          <div class="text">
            <PhotoUpload photoType="view" :photoData="{ moduleName: 'eqpFile' }" :photoList="qrcodeImg" />
          </div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">其他信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">合同名称</div>
          <div class="text">{{ eqpDetailData?.htName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">合同编号</div>
          <div class="text">{{ eqpDetailData?.htCode }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备厂家</div>
          <div class="text">{{ eqpDetailData?.manufacturer }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">厂家联系人</div>
          <div class="text">{{ eqpDetailData?.manufacturerContact }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">厂家联系电话</div>
          <div class="text">{{ eqpDetailData?.manufacturerPhone }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备负责人</div>
          <div class="text">{{ eqpDetailData?.principalName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">出厂日期</div>
          <div class="text">{{ eqpDetailData?.manufactureDate }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">质保结束日期</div>
          <div class="text">{{ eqpDetailData?.warrantyEndDate }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备定值</div>
          <div class="text">{{ eqpDetailData?.constantVal }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">设备描述</div>
          <div class="text">{{ eqpDetailData?.description }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">设备图片</div>
          <div class="text">
            <PhotoUpload photoType="view" :photoData="{ moduleName: 'eqp' }" :photoList="eqpDetailData?.pictureList" />
          </div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">自定义扩展信息</div>
    <px-table :data="eqpDetailData?.extInfoMap" style="margin-bottom: 16px" class="equip-table" size="small" max-height="400" border>
      <px-table-column min-width="120" show-overflow-tooltip label="扩展信息名称" align="center" prop="key" />
      <px-table-column min-width="180" show-overflow-tooltip label="扩展内容" align="center" prop="value" />
    </px-table>
    <div class="view-equip-title">相关资料</div>
    <div class="view-equip-content">
      <FileUpload fileType="view" :fileData="{ moduleName: 'eqp' }" :fileList="eqpDetailData?.extFileList" />
    </div>
  </px-dialog>
</template>

<script lang="ts" setup>
import FileUpload from "@/components/Upload/FileUpload.vue";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { getToken } from "@/utils/auth";
import { dataURLtoBlob } from "@/utils/common";
import { getEquipHistory } from "@/api/equip/archive";
import axios from "axios";
import { ref, computed } from "vue";

const qrcodeImg = ref([]); // 设备二维码文件

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
const props = defineProps(["id", "viewDialogVisible"]);
const visible = computed(() => props.viewDialogVisible);

const qrcodeUrl = ref("");
const dialogVisible = ref(false);
const qrcodeList = ref([]);
const eqpDetailData = ref({});

const photoPreview = () => {
  dialogVisible.value = true;
};

const photoDownload = file => {
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = file.url;
  link.setAttribute("download", file.name);
  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
};

const getUrl = async () => {
  axios({
    method: "post",
    url: "/ifp/digitaltwins/api/v1/equipment/createQrCode",
    data: { eqpId: eqpDetailData.value?.eqpId },
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + getToken().accessToken || "",
      facCode: localStorage.getItem("facCode") || ""
    }
  }).then(async res => {
    const blob = dataURLtoBlob(res.data);
    const imgSrc = URL.createObjectURL(blob);
    qrcodeUrl.value = imgSrc; // 图片下载地址
    qrcodeList.value = [];
    qrcodeList.value.push({ url: res.data, name: "设备二维码" }); // 图片展示地址
  });
};

const tempManage = ref("");

const openDialog = async () => {
  const params = {
    id: props.id
  };
  const data = await getEquipHistory(params);
  eqpDetailData.value = data;
  const { manageAttr, bigFileDTO } = data;
  qrcodeImg.value = bigFileDTO ? [bigFileDTO] : [];
  const arrEnum = {
    1: "计量器具",
    2: "特种设备",
    3: "定期校验仪器仪表"
  };
  if (manageAttr) {
    tempManage.value = manageAttr
      ?.split(",")
      ?.map(item => arrEnum[item])
      ?.join(",");
  } else {
    tempManage.value = "";
  }
  getUrl();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail {
  height: calc(100vh - 268px);
  padding: 0;
}

.empty {
  height: 50px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 50px;
  color: #909399;
  text-align: center;
  border: 1px solid #dfdfdf;
}

:deep(.px-upload--picture-card) {
  display: none;
}
</style>
